<template>
  <view>
    <scroll-view scroll-x :class="tabBg+' nav '+[tabType=='2'?'text-center':'']" scroll-with-animation :scroll-left="scrollLeft">
      <view v-if="tabType=='3'" class="flex text-center">
        <view class="cu-item flex-sub" @tap="tabSelect" :class="index==tabCur?tabCurColor+' cur':tabColor" v-for="(item,index) in list" :key="index" :data-num="index" :data-id="item.id">
          {{item.name}}
        </view>
      </view>
      <view v-else class="cu-item" @tap="tabSelect" :class="index==tabCur?tabCurColor+' cur':tabColor" v-for="(item,index) in list" :key="index"  :data-num="index" :data-id="item.id">
        {{item.name}}
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default{
    data(){
        return {
         scrollLeft: 0,
         tabCur:''
        }
    },
    props:{
      //背景颜色
      tabBg:{
        type:String,
        default(){
          return 'bg-white'
        }
      },
      //字体颜色
      tabColor:{
        type:String,
        default(){
          return 'text-black'
        }
      },
      //选中字体颜色
      tabCurColor:{
        type:String,
        default(){
          return 'text-green'
        }
      },
      //类型：1、默认，2、居中，3、平分
      tabType:{
        type:[String,Number],
        default(){
          return '1'
        }
      },//当前选项卡序号
      tabNum:{
        type:Number,
        default(){
          return 0
        }
      },
       //数据
      list:{
         type:Array,
         value:[]
      }
    },
    mounted() {
       this.tabCur = this.tabNum
    }
    ,watch: {
      list:{
        handler(newValue, oldValue) {  
          this.list=newValue;
        },
        deep:true
      }
    },
		methods: {
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.num;
				this.scrollLeft = (e.currentTarget.dataset.num - 1) * 60;
				this.$emit("changTab",{num: this.tabCur});
			},
      //动态设置页面
      tabChange(index){
          this.tabCur = index;
          this.scrollLeft = (index - 1) * 60
      }
		}
  }
</script>

<style>
</style>
